<template>
  <el-container>
    <div class="main-wrap">
      <el-header style="height:80px;">
        <el-form
          ref="processForm"
          label-width="80px"
          style="padding-top:20px;"
        >
          <el-row>
            <el-col :span="12">
              <el-button
                type="warning"
                @click="setprocessForm"
              >设置通知</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-header>
      <el-main style="height:720px;">
        <section class="contant_head">
          <span>图表
            <!-- <sub>Form</sub> -->
          </span>
        </section>
        <el-table
          :data="notiList"
          border
          stripe
          style="text-align:center;"
          :header-cell-style="getRowClass"
          tooltip-effect="dark"
          id="out-table"
        >
          <!-- <el-table-column type="selection" width="55" align="center"> </el-table-column> -->
          <el-table-column
            prop="title"
            label="标题"
            align="center"
          > </el-table-column>
          <el-table-column
            prop="time"
            label="时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="内容"
            align="center"
          >
            <template slot-scope="scope">
              <el-popover
                placement="right-start"
                width="200"
                trigger="hover"
              >
                <div style="white-space: pre-line">{{scope.row.content}}</div>
                <el-button slot="reference">查看内容</el-button>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            prop="ifPop"
            label="弹窗"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="receiveMan"
            label="发送对象"
          >
            <template slot-scope="scope">
              <el-dropdown
                v-if="scope.row.receiveMan.length"
                size="medium"
                split-button
              >
                查看
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item,index) in scope.row.receiveMan"
                    :key="index"
                  >{{item}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="receiveBranch"
            label="发送部门"
          >
            <template slot-scope="scope">
              <el-dropdown
                v-if="scope.row.receiveBranch.length"
                size="medium"
                split-button
              >
                查看
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item,index) in scope.row.receiveBranch"
                    :key="index"
                  >{{item}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <!-- <el-table-column fixed="right" label="操作" align="center">
                        <template slot-scope="scope">
                            <i class="el-icon-delete" @click="deleteRow(scope.$index,scope.row)" style="cursor:pointer;margin-left: 16px" title="移除"></i>
                        </template>
                    </el-table-column> -->
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10,15]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next"
            :total="total"
            style="float:right"
          >
          </el-pagination>
        </div>
      </el-main>
      <el-dialog :visible.sync="notificationVisible">
        <div class="noti-main">
          <el-form
            :model="formData"
            ref="dopeForm"
            :rules="rules"
            label-width="100px"
          >
            <el-row>
              <el-form-item
                label="标题"
                prop="title"
              >
                <el-input
                  v-model="formData.title"
                  placeholder="请输入通知标题"
                ></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item
                label="内容"
                prop="content"
              >
                <el-input
                  type="textarea"
                  :rows="15"
                  placeholder="请输入通知内容"
                  v-model="formData.content"
                >
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="是否弹窗">
                <el-radio
                  v-model="formData.ifPop"
                  :label="1"
                >是</el-radio>
                <el-radio
                  v-model="formData.ifPop"
                  :label="2"
                >否</el-radio>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="选择颜色">
                <el-radio-group
                  v-model="formData.pigment"
                  class="custom-color"
                >
                  <el-radio
                    :label="1"
                    class="red"
                  >红色</el-radio>
                  <el-radio
                    :label="2"
                    class="yellow"
                  >黄色</el-radio>
                  <el-radio
                    :label="3"
                    class="green"
                  >绿色</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="选择发送类型">
                <el-select
                  v-model="sendType"
                  @change="onTypeChange"
                >
                  <el-option
                    :value="1"
                    label="个人"
                  ></el-option>
                  <el-option
                    :value="2"
                    label="部门"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row v-if="sendType===1">
              <el-form-item
                label="发送对象"
                prop="receiveMan"
              >
                <el-col :span="16">
                  <el-select
                    v-model="formData.receiveMan"
                    multiple
                    placeholder="请选择发送对象"
                    clearable
                    filterable
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in roles"
                      :key="item.cUserId"
                      :label="item.cNickname"
                      :value="item.cUserId"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-row>
            <el-row v-if="sendType===2">
              <el-form-item
                label="发送部门"
                prop="receiveBranch"
              >
                <el-col :span="16">
                  <el-select
                    v-model="formData.receiveBranch"
                    multiple
                    placeholder="请选择发送部门"
                    clearable
                    style="width: 100%"
                    filterable
                  >
                    <el-option
                      v-for="item in departments"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="cancelDope('dopeForm')"
                >
                  取消
                </el-button>
                <el-button
                  type="primary"
                  @click="submitFormData('dopeForm')"
                >
                  确定
                </el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </el-container>
</template>


<script>
import { api } from '@/fetch/api'

export default {
  name: 'Notification',
  data() {
    const receiverCheck = (rule, value, callback) => {
      if (!this.formData.receiveBranch.length && !this.formData.receiveMan.length) {
        callback(new Error('至少选择一个发送对象或部门'))
      } else {
        callback()
      }
    }
    return {
      roles: [],
      departments: [],
      search: {},
      notificationVisible: false,
      limit: 10,
      currentPage: 1,
      total: 0,
      notiList: [],
      sendType: 1,
      formData: {
        content: "",
        dopeId: 0,
        ifPop: 1,
        pigment: 1,
        receiveBranch: [],
        receiveMan: "",
        status: 0,
        time: "",
        title: "",
        twoDutyMan: 0,
        type: 0,
        visual: 0,
        writeMan: 0
      },
      rules: {
        title: [
          { required: true, message: '请输入通知标题', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入通知内容', trigger: 'blur' }
        ],
        receiveMan: [
          { validator: receiverCheck, trigger: 'blur' }
        ],
        receiveBranch: [
          { validator: receiverCheck, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    setprocessForm() {
      this.notificationVisible = true
    },
    handleSizeChange(size) {
      this.limit = size
      this.findDope()
    },
    handleCurrentChange(val) {
      // this.findProcess(this.search.name, this.limit, this.currentPage)
      this.currentPage = val
      this.findDope()
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:rgba(242,242,242,1)";
      } else {
        return "";
      }
    },
    onTypeChange(val) {
      this.formData.receiveBranch = [];
      this.formData.receiveMan = [];
    },
    submitFormData(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          const values = { ...this.formData }
          values.receiveBranch = values.receiveBranch.join(',')
          values.receiveMan = values.receiveMan.join(',')
          // values.
          console.log(Date.now())
          this.sendDope(values, form)
        } else {
          this.$message("请完善表单")
        }
      })
    },
    getPermission() {
      api
        .PermissionPage({}, { limit: 0, pageIndex: 0 })
        .then(response => {
          if (response.status === 100) {
            this.permissions = response.result.list;
            api.LocalStorageService.update("permissions", response.result.list);
          } else {
          }
        })
        .catch(error => { });
    },
    sendDope(params, form) {
      api.sendDope(params).then(response => {
        console.log(response)
        if (response.status === 100) {
          this.$message({
            type: "success",
            message: '设置成功'
          })
          this.findDope()
          this.notificationVisible = false
          this.$refs[form].resetFields()
        }
      })
    },
    findDope() {
      api.findDope(this.limit, this.currentPage).then(response => {
        if (response.status === 100) {
          this.notiList = response.result.inspectorList
          this.total = response.result.totalCount
        }
      })
    },
    cancelDope(form) {
      this.$refs[form].resetFields()
      this.notificationVisible = false
    },
    getDopeRoles() {
      api.getDopeRoles().then(response => {
        this.roles = response.result
      })
    },
    getDopeDeparts() {
      api.findDepartment(0, 0).then(response => {
        this.departments = response.result.inspectorList
      })
    },
    findProcess(name) {
      api.findProcess(name, this.limit, this.currentPage).then(response => {
        this.processList = response.result.inspectorList
        this.total = response.result.totalCount
      })
    },
  },
  mounted() {
    this.getPermission()
    this.getDopeRoles()
    this.getDopeDeparts()
    this.findDope()
  }
}
</script>

<style lang="less" scoped>
.main-wrap {
  background-color: #ededed;
  width: 100%;
}
.noti-main {
  width: 98%;
  margin: 0 auto;
  background-color: #fff;
  padding: 16px;
  box-sizing: border-box;
}
</style>

<style lang="less" scoped>
@import url("../../assets/css/index.css");
.el-header {
  width: 98%;
  background: #fff;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px;
  .el-input,
  .el-select,
  .el-date-picker {
    width: 100%;
  }
}
.el-main {
  width: 98%;
  background: #fff;
  margin: 0 auto;
  padding: 0px;
  .contant_head {
    border-left: 3px solid #f7585d;
    background: #f9f9f9;
    height: 40px;
    span {
      line-height: 40px;
      font-size: 20px;
      padding-left: 10px;
      sub {
        font-size: 12px;
      }
    }
  }
}
</style>